<!-- Copyright 2022 The Chromium Authors
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->
<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="chrome://theme/colors.css?sets=ref,sys">
  <meta charset="utf-8">
  <title>Color Internals</title>
  <style>
    body {
      --border-style: 1px solid var(--cros-sys-outline);
      background-color: var(--cros-sys-app_base_shaded);
      color: var(--cros-sys-on_surface);
      font-family: Roboto, sans-serif;
      font-size: 14px;
    }
    #content {
      width: 100%;
    }
    #table-container {
      background-color: var(--cros-sys-surface);
      border: var(--border-style);
      border-radius: 8px;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
      table-layout: fixed;
      width: 100%;
    }
    table > :not(caption) {
      font-family: 'Courier New', Courier, monospace;
    }
    caption {
      padding: 16px;
    }
    th {
      background-color: var(--cros-sys-header);
      padding: 16px;
    }
    th.border-end {
      border-inline-end: var(--border-style);
    }
    th,
    tr {
      border-bottom: var(--border-style);
    }
    tr:hover {
      background-color: var(--cros-sys-surface1);
    }
    td {
      text-align: center;
    }
    a {
      color: var(--cros-sys-primary);
    }
    .color-swatch {
      border: var(--border-style);
      border-radius: 50%;
      display: inline-block;
      height: 25px;
      margin: 16px 8px;
      vertical-align: middle;
      width: 25px;
    }

  </style>
</head>
<div id="content">
  <div class="block" id="wallpaper-block" loading>
    <h1 id="wallpaper-colors-title">Wallpaper Colors</h1>
    <h2 id="wallpaper-prominent-colors-title">Prominent Colors</h2>
    <div id="wallpaper-prominent-colors-container"></div>
    <h2 id="wallpaper-k-mean-color-title">K Mean Color</h2>
    <div id="wallpaper-k-mean-color-container"></div>
  </div>
  <div class="block">
    <h1 id="table-title">Cros Tokens</h2>
    <p>This is the current color palette for CrOS, generated from
      <a href="https://crsrc.org/c/ui/chromeos/styles/cros_ref_colors.json5">
        cros_ref_colors.json5
      </a> and
      <a href="https://crsrc.org/c/ui/chromeos/styles/cros_sys_colors.json5">
        cros_sys_colors.json5
      </a>.
    </p>
    <p>The value column shows the current color for that token with the current
      system palette in whatever light/dark theme you are currently using. The
      formula columns show how a sys token is calculated from a ref token.
    </p>
    <p> Last updated <span id="last-updated">[loading]</span></p>
    <div id="table-container">
      <table id="ref-tokens">
        <caption>Ref Tokens</caption>
        <thead>
          <tr>
            <th class="border-end">Token</th>
            <th class="border-end">Value</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
      <table id="sys-tokens" aria-labelledby="table-title">
        <caption>Sys Tokens</caption>
        <thead>
          <tr>
            <th class="border-end">Token</th>
            <th class="border-end">Value</th>
            <th class="border-end">Light Formula</th>
            <th>Dark Formula</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
</div>
<script type="module" src="index.js"></script>
